[React Native] PanResponder와 TouchableOpacity 등 클릭 이벤트 충돌 문제

React Native에서 스와이프나 드래그 등의 특정 제스처를 구현할 경우 PanResponder API를 사용하여 구현할 수 있습니다. 이때 해당 API가 사용된 <Animated /> 내부에 클릭이벤트가 존재하는 경우 원하는 클릭이 동작하지 않는 문제가 나타나게 됩니다.

# PanResponder 내부에 클릭 이벤트 문제 해결방법

먼저 원인은 PanResponder가 선언된 이벤트에서 하위 엘리먼트의 이벤트를 제어하기 때문입니다. 이를 해결하기 위한 방법으로 onPanResponderRelease() 함수를 수정하는 방법이 있습니다.

onPanResponderRelease()는 이벤트와 제스처를 인자로 받아 처리할 수 있는데 내부에 원하는 엘리먼트 요소가 클릭되었는지 확인 후 이벤트를 처리하는 방법입니다. 이 경우 원하는 엘리먼트는 엘리먼트 ID와 일치하는지 확인이 필요하면 아래처럼 if문을 사용할 수 있습니다. onPanResponderRelease(event, gestureState) 내부에 사용된 코드입니다.

위와 같이  코드를 적용하려면 원하는 엘리먼트의 ID를 알아야하며 이 경우 클릭이벤트를 만들어 아래처럼 alert()으로 확인할 수 있습니다.

event.target은 String 문자가 아니므로 앞에 ''를 더하여 문자로 변환하였습니다. alert()으로 출력하기 위함입니다.